import React, {memo, useCallback, useEffect, useState} from 'react';
import {TableWrapper} from "@/common/table-style";
import {createOpus, deleteOpus, getOpusList, updateOpus} from "@/network/opus.request";
import setMessage from "@/utils/setMessage";
import {Button, Input, Modal, Table} from "antd";
import moment from "moment";

export default memo(function ProfileOpus(props) {

  const {userId} = props;

  const [opusList, setOpusList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [u_visible, setU_Visible] = useState(false);
  const [u_confirmLoading, setU_ConfirmLoading] = useState(false);
  const [c_visible, setC_Visible] = useState(false);
  const [c_confirmLoading, setC_ConfirmLoading] = useState(false);
  const [opusId, setOpusId] = useState();

  const [key, setKey] = useState();
  const [value, setValue] = useState();
  const [link, setLink] = useState();


  const changeOpus = useCallback(() => {
    getOpusList(userId).then(res => {
      setOpusList(res)
      setIsLoading(false)
    }).catch(console.log)
  }, [userId])

  useEffect(() => {
    changeOpus()
  }, [changeOpus])

  const handleUpdate = useCallback((record) => {
    setKey(record.opusKey);
    setValue(record.opusValue);
    setLink(record.opusLink);
    setU_Visible(true);
    setOpusId(record.key);
  }, [])

  const handleDelete = useCallback((record) => {
    setVisible(true)
    setOpusId(record.key)
  }, [])

  // 删除
  const handleOk = useCallback(() => {
    setConfirmLoading(true);
    deleteOpus(opusId).then(res => {
      setConfirmLoading(false);
      setVisible(false);
      res.affectedRows && setMessage("删除成功", "success");
      res.affectedRows && changeOpus();
      !res.affectedRows && setMessage("删除失败", "error");
    }).catch(error => {
      setConfirmLoading(false);
      setMessage("删除失败", "error");
      console.log(error)
    })
  }, [opusId, changeOpus])

  // 更新
  const u_handleOk = useCallback(() => {
    setU_ConfirmLoading(true);
    if (key.trim() !== "" && value.trim() !== "") {
      updateOpus(opusId, key, value, link).then(res => {
        setU_ConfirmLoading(false);
        setU_Visible(false);
        res.affectedRows && setMessage("修改成功", "success");
        res.affectedRows && changeOpus();
        !res.affectedRows && setMessage("修改失败", "error");
      }).catch(error => {
        setU_ConfirmLoading(false);
        setMessage("修改失败", "error");
        console.log(error)
      })
    } else {
      setU_ConfirmLoading(false);
      setMessage("输入要素不齐全", "info");
    }
  }, [opusId, key, value, link, changeOpus])

  // 新增
  const handleCreate = useCallback(() => {
    setKey("");
    setValue("");
    setLink("");
    setC_Visible(true);
  }, [])

  // 新增
  const c_handleOk = useCallback(() => {
    setC_ConfirmLoading(true);
    if (key.trim() !== "" && value.trim() !== "") {
      createOpus(key, value, link).then(res => {
        setC_ConfirmLoading(false);
        setC_Visible(false);
        res.affectedRows && setMessage("新增成功", "success");
        res.affectedRows && changeOpus();
        !res.affectedRows && setMessage("新增失败", "error");
      }).catch(error => {
        setC_ConfirmLoading(false);
        setMessage("新增失败", "error");
        console.log(error)
      })
    } else {
      setC_ConfirmLoading(false);
      setMessage("输入要素不齐全", "info");
    }
  }, [key, value, link, changeOpus])

  const columns = [
    {
      title: "id",
      dataIndex: "key",
      key: "key",
      align: "center",
      sorter: (a, b) => a.key - b.key,
      sortDirections: ["descend", "ascend"],
      width: 100,
      ellipsis: true
    },
    {
      title: "作品名称",
      dataIndex: "opusKey",
      key: "opusKey",
      align: "center",
      width: 180,
      ellipsis: true
    },
    {
      title: "作品介绍",
      dataIndex: "opusValue",
      key: "opusValue",
      align: "center",
      width: 300,
      ellipsis: true
    },
    {
      title: "作品链接",
      dataIndex: "opusLink",
      key: "opusLink",
      align: "center",
      width: 200,
      ellipsis: true
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      align: "center",
      width: 200,
      ellipsis: true,
      sorter: (a, b) => Date.parse(a.createTime) - Date.parse(b.createTime),
      sortDirections: ["descend", "ascend"],
      render: (value) => (<>
        <span>
          {moment(value).format("YYYY-MM-DD HH:mm:ss")}
        </span>
      </>)
    },
    {
      title: "操作",
      dataIndex: "todo",
      key: 'todo',
      align: "center",
      render: (text, record) => (<>
        <Button onClick={e => handleUpdate(record)} type="primary" size="small" className="mr-2">修改</Button>
        <Button onClick={e => handleDelete(record)} type="primary" size="small" danger>删除</Button>
      </>)
    }
  ]
  return (
    <TableWrapper>
      <div className="pb-6">
        <Button type="primary" onClick={handleCreate} size="middle">新增</Button>
      </div>

      <Modal
        title="新增操作"
        visible={c_visible}
        onOk={c_handleOk}
        cancelText="取消"
        okText="确定"
        confirmLoading={c_confirmLoading}
        onCancel={e => setC_Visible(false)}
      >
        <div>
          <Input value={key} onChange={e => setKey(e.target.value)} className="my-3" placeholder="作品名称"/>
          <Input value={value} onChange={e => setValue(e.target.value)} className="my-3" placeholder="作品介绍"/>
          <Input value={link} onChange={e => setLink(e.target.value)} className="my-3" placeholder="作品链接"/>
        </div>
      </Modal>
      {
        opusList && opusList.length > 0 && (
          <>
            <Table
              pagination={false}
              columns={columns}
              dataSource={opusList}
              size="middle"
              loading={isLoading}
              scroll={{y: 520}}
            />

            <Modal
              title="修改操作"
              visible={u_visible}
              onOk={u_handleOk}
              cancelText="取消"
              okText="确定"
              confirmLoading={u_confirmLoading}
              onCancel={e => setU_Visible(false)}
            >
              <div>
                <Input value={key} onChange={e => setKey(e.target.value)} className="my-3" placeholder="作品名字"/>
                <Input value={value} onChange={e => setValue(e.target.value)} className="my-3" placeholder="作品介绍"/>
                <Input value={link} onChange={e => setLink(e.target.value)} className="my-3" placeholder="作品链接"/>
              </div>
            </Modal>

            <Modal
              title="删除操作"
              visible={visible}
              onOk={handleOk}
              cancelText="取消"
              okText="确定"
              confirmLoading={confirmLoading}
              onCancel={e => setVisible(false)}
            >
              <p>确定删除吗?</p>
            </Modal>
          </>
        )
      }
    </TableWrapper>
  )
})